<!--  -->
<template>
  <div class="course-learning-wrap">
    <!-- 顶部导航栏-->
    <van-sticky>
      <van-nav-bar
        :title="course.courseName"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #left>
          <van-icon class="my-icon" name="arrow-left" size="18" />
        </template>
      </van-nav-bar>
    </van-sticky>
    <div>
      <my-video v-if="showVideo"> </my-video>
      <div class="img-box" v-if="showPics">
        <img v-for="(item, index) in PicList" :key="index" :src="item" />
      </div>
    </div>
    <!-- <div>
      <img
        v-if="!data.showVideo"
        :src="data.course.lessonImgUrl"
        class="courseImg"
      />
    </div> -->

    <div class="mynav">
      <div @click="getWorkList">
        <van-icon name="todo-list" size="20" color="#2a82e4"></van-icon>
        <span>课堂作业</span>
      </div>
      <div @click="showTeacherInfo = true">
        <van-icon name="manager" size="20" color="#2a82e4"></van-icon>
        <span>联系老师</span>
      </div>
      <div class="morechapters" @click="showLessonlist">
        <van-icon name="more" size="20" color="#2a82e4"></van-icon>
        <span>课程章节</span>
      </div>
    </div>
    <!-- 讲师介绍,等后台封装成对象，下同 -->
    <my-teacher-info :data="course.teacherVoList"></my-teacher-info>
    <!-- 学生评价 -->
    <my-stu-evaluate></my-stu-evaluate>
    <!-- 遮罩层显示课程列表 -->
    <van-overlay
      id="chapterList"
      :show="showChapterList"
      @click="showChapterList = false"
    >
      <p>播放列表</p>
      <div v-for="(item, index) in course.courseLesson" :key="item">
        <van-cell
          id="lessonsItem"
          :title="index + 1 + '.' + item.lessonName"
          @click="onLessonChange(index)"
        >
        </van-cell>
      </div>
    </van-overlay>
    <!-- 评论区 -->
    <div class="title">交流&答疑:</div>
    <div class="discussion">
      <!-- 评论区 -->
      <div class="discussion-area">
        <discussion :lessonId="lessonId"></discussion>
      </div>
      <div class="discussion-input">
        <input type="text" v-model="content" placeholder="输入内容" @keydown.enter="handleSend"/>
        <el-button id="button" type="button" @click="handleSend" > 发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { localSet, localGet } from "../../utils/auth.js";
import { useRoute, useRouter } from "vue-router";
import MyVideo from "@/components/Course/user/MyVideo.vue";
import MyTeacherInfo from "@/components/Course/user/MyTeacherInfo.vue";
import MyStuEvaluate from "@/components/Course/user/MyStuEvaluate.vue";
import router from "@/router/index.js";
import discussion from "@/components/Course/user/Discussion.vue";
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    let content = ref("");
    // const showChapterList = ref(false)
    // const showTeacherInfo = ref(false)
    let currentCourseId = ref(0);
    let lessonId = ref(0);
    const route = useRoute();
    const router = useRouter();
    // lessonId.value = route.params.lessonId;
    console.log(window.sessionStorage.getItem("lessonId"));

    lessonId.value = window.sessionStorage.getItem("lessonId");
    // const getLessonId = () => {
    //   const route = useRoute();
    //   console.log(route);
    //   let lessonId = route.params.lessonId;
    // }
    const onClickLeft = () => {
      router.push({
        name: "CourseInfo",
        params: { courseId: currentCourseId },
      });
      console.log(currentCourseId);
    };
    const getWorkList = () => {
      router.push({
        name: "UserWork",
        // params: { courseId: currentCourseId },
      });
    }
    const showLessonlist = () =>{
      router.push({
        name: "CourseInfo",
        // params: { courseId: currentCourseId },
      });
    }
    onMounted(() => {
      window.sessionStorage.setItem("lessonId", lessonId.value);
      window.localStorage.setItem("lessonId", lessonId.value);
      lessonId.value = window.sessionStorage.getItem("lessonId");

      //console.log(lessonId.value);
    });
    function getCourseId() {
      currentCourseId = this.$route.params.courseId;
    }
    // 获取该课程对应的学生评价
    function mygetStuComment() {}
    // 提交评论
    const discussion = reactive({
      list: [{ text: "1" }],
    });

    function handleSend() {
      proxy.$axios.course
        .postTalk({
          token: window.sessionStorage.getItem("token"),
          deleted: 0,
          lessonId: window.sessionStorage.getItem("lessonId"),
          talkContent: content.value,
          talkId: 1,
          talkTime: "2021-09-16T02:26:17.183Z",
          userId: window.sessionStorage.getItem("userId"),
        })
        .then((res) => {
          console.log(res);
        });
      lessonId.value = new Date();
      content.value = "";
    }
    function showTeacherInfo() {}
    function showChapterList() {}

    // 定时访问后台获取最新5条评论
    function UpdateStuComment() {}
    // 切换课程章节=修改视频路径

    return {
      content,
      currentCourseId,
      // showChapterList,
      // showTeacherInfo,
      showLessonlist,
      getWorkList,
      onClickLeft,
      getCourseId,
      handleSend,
      UpdateStuComment,
      mygetStuComment,
      lessonId,
    };
  },
  data() {
    return {
      course: {},
      showVideo: true,
      showPics: false,
      nowlesson: {},
      PicList: [],
    };
  },
  components: {
    MyVideo,
    MyTeacherInfo,
    MyStuEvaluate,
    discussion,
  },
  created() {
    // 路由传参，测试接收传过来的课程ID
    // console.log(this.$route.params.courseId)

    // 访问接口，根据课程ID获取选中的课程信
    this.mygetCourseById();
    this.getCourseId();
  },
  mounted() {
    setTimeout(() => {
      this.onLessonChange(0);
    }, 10);
    // this.$nextTick(() => {
    //   //渲染完成所有dom元素之后调用？
    //   this.onLessonChange(0);
    // });
  },
  methods: {
    mygetCourseById() {
      // console.log(this.$route.params.index)
      // console.log(this.$route.params.courseId)
      // console.log(this.$route.params.lessonId);
      const that = this;
      this.$axios.course
        .getCourseMoreInfoById(window.sessionStorage.getItem("courseId"))
        .then((res) => {
          if (res.status === 200) {
            this.course = JSON.parse(JSON.stringify(res.data.data));
            this.nowlesson =
              this.course.courseLesson[window.sessionStorage.getItem("index")];
            if (this.nowlesson.lessonVideoUrl === undefined) {
              // 说明这是一节图片课
              this.showVideo = false;
              this.showPics = true;
              let bot = this.nowlesson.lessonImgUrl.split(';');
              this.PicList=this.PicList.concat(bot);
            } else {
              this.showVideo = true;
              this.showPics = false;
              document.getElementById("videoooo").src =
                this.nowlesson.lessonVideoUrl;
              document.getElementById("videoooo").play();
            }
          }
        });
    },
    onLessonChange(index) {
      // 同样的代码为什么这里会访问失败？
      // if (data.course.courseLesson[0].lessonVideourl == "") {
      //   data.showVideo = false;
      // } else {
      //   data.showVideo = true;
      // }
      this.nowlesson = this.course.courseLesson[index];
      // console.log(this.data.showVideo)
      // console.log(this.data.nowlesson.lessonVideoUrl)
      document.getElementById("videoooo").src = this.nowlesson.lessonVideoUrl;
      document.getElementById("videoooo").play();
    },
  },
};
</script>
<style lang="scss" scoped>
.course-learning-wrap {
  margin: 0;
  padding: 0;
  width: auto;
  justify-content: space-between;

  .title {
    margin-top: 10px;
    padding-left: 10px;
    color: #808080;
    font-size: 14px;
    font-weight: 500;
  }
  .courseImg {
    width: 100%;
    height: 100%;
  }
  .discussion {
    &-area {
      border-radius: 10px;
      height: 260px;
      background-color: #f7fcfe;
      margin-right: 10px;
      margin-left: 10px;
      margin-bottom: 10px;
      box-shadow: 0px 1.5px 1.5px 0px rgba(0, 0, 0, 0.5);
    }
    &-input {
      display: flex;
      justify-content: space-between;
      margin-right: 10px;
      margin-left: 10px;
      input {
        flex: 1;
        border-radius: 10px;
        border-width: 0px;
        background-color: #e5e5e5;
        font-size: 12px;
        padding: 8px;
        margin-right: 5px;
      }
      button {
        background-color: #2a82e4;
        border-width: 0px;
        border-radius: 5px;
        color: #fff;
        font-size: 10px;
      }
    }
  }
  .mynav {
    text-align: center;
    background-color: #fff;
    display: flex;
    padding: 10px;
    div {
      flex: 1;
      span {
        font-size: 14px;
      }
    }
  }
  #lessonsItem {
    background-color: rgba(38, 38, 43, 0.5);
    color: #fff;
  }
  #chapterList {
    color: #fff;
    p {
      text-align: center;
    }
  }
}
.img-box {
  width: 100%;
  min-height: 500px; //先自动撑开高度
  img {
    width: 100%;
  }
}
</style>
